<style>
    .round {
        margin: 5px 0 0 0 !important;
        padding: 5px 8px 5px 8px !important;
        -moz-border-radius: 25px !important; /* Gecko browsers */
        -webkit-border-radius: 25px !important; /* Webkit browsers */
        border-radius: 25px !important; /* W3C syntax */
        margin: 0 0px 0 8px !important;
        /*-moz-border-radius: 50% !important;
        -webkit-border-radius: 50% !important;
        border-radius: 50% !important;*/
    }

    .running {
        border: solid 5px #eee;
        box-shadow: 3px 5px 5px #aaa;
        z-index: 9999;
    }

    .btn-xxs {
        padding: 5px 3px 7px 3px !important;
        font-size: 2px !important;
        line-height: 1px !important;
    }

    .btn-round {
        -moz-border-radius: 50% !important;
        -webkit-border-radius: 50% !important;
        border-radius: 50% !important;
    }

    .msg-complete {
        color: #5cb85c;
    }

    .msg-warning {
        color: red;
    }

    .env_online {
        background-color: gold !important;
        color: red !important;
        border-color: gold !important;
    }

    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
        background-color: yellow !important;
    }
</style>
<section class="content-header">
    <h1>&nbsp;</h1>
    <ol class="breadcrumb pull-left" style="left:10px;">
        <li><a href="javascript:void(0);"><i class="fa fa-dashboard"></i>
            环境发布</a></li>
        <li class="active">{{env.name}}</li>
    </ol>
</section>
<section class="content">

    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <div>
                        当前环境：<span style="color: red;"
                                   ng-class="{'demo':'env_demo','online':'env_online','staging':'env_staging','verify':'env_verify'}[env.name]">{{env.name}}</span>
                        <span style="margin-left: 5%;color: red;">线上环境需要管理员授权后才能发布!</span>
                        <span style="margin-left: 5%;" ng-if="canAuthorize() && !canReleaseOnline">授权时长(小时)：</span>
                        <select data-ng-model="info.authorizeTime" ng-if="canAuthorize() && !canReleaseOnline">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="4">4</option>
                            <option value="8">8</option>
                            <option value="12">12</option>
                            <option value="18">18</option>
                            <option value="24">24</option>
                        </select>
                        <button class="btn btn-default" style="color: red;margin-left: 1%;"
                                data-ng-click="authorizeRelease();" ng-if="canAuthorize() && !canReleaseOnline"
                                uib-popover="授权后,运维可以发布线上环境" popover-trigger="mouseenter">授权
                        </button>
                        <span style="margin-left: 5%;" ng-if="canAuthorize() && canReleaseOnline">当前授权截止时间：{{releaseTime}}</span>
                        <button class="btn btn-default" style="color: red;margin-left: 1%;"
                                data-ng-click="authorizeRelease();" ng-if="canAuthorize() && canReleaseOnline"
                                uib-popover="撤销授权,不能发布线上环境" popover-trigger="mouseenter">撤销授权
                        </button>
                        <button class="btn btn-default" style="color: red;margin-left: 5%;"
                                data-ng-click="stopDeploy();">终止发布{{env.name}}环境
                        </button>
                        <button class="btn btn-default" style="color: red;margin-left: 5%;"
                                data-ng-click="reloadJumpSSHServer();">重置跳板机对象
                        </button>
                        <span ng-if="isUserCanOperateByRole('ops');">
                            <input ng-model="info.isCleanRedis" ng-true-value="true" style="margin-left: 5%;"
                                   ng-disabled="env.areas[info.areaIndex].status == 'running'"
                                   ng-false-value="false" type="checkbox"><span style="color: red;">清空redis</span>
                        </span>
                        <button ng-if="isUserCanOperateByRole('ubarrier_admin');" class="btn btn-default"
                                style="color: red;margin-left: 5%;"
                                data-ng-click="gotoUbarrier();">切换流量
                        </button>
                    </div>
                    <br>
                    <div>
                        <table width="100%">
                            <tr>
                                <td width="20%">
                                    <button class="btn btn-default" ng-click="changeEnv(envName);"
                                            style="margin-left: 1%;" ng-disabled="envBtnDisable(envName)"
                                            ng-class="{'demo':'env_demo','online':'env_online','staging':'env_staging','verify':'env_verify'}[envBtnColor(envName)]"
                                            ng-repeat="envName in envNames">{{envName}}
                                    </button>
                                </td>
                                <td width="10%">
                                    <input ng-model="info.isUseIntegration" ng-true-value="true"
                                           ng-disabled="env.areas[info.areaIndex].status == 'running'"
                                           ng-click="changeCheckStatusByIntegration(true);" ng-false-value="false"
                                           type="checkbox">使用集成计划
                                </td>
                                <td width="20%">
                                    <span ng-show="info.isUseIntegration">

                                        <ui-select ng-model="info.selectIntegration" theme="bootstrap"
                                                   style="min-width: 300px;" ng-change="changeCheckStatusByIntegration(true);">
                                            <ui-select-match
                                                    placeholder="选择集成计划">{{$select.selected.integration_name}}</ui-select-match>
                                            <ui-select-choices
                                                    repeat="integration in info.integrationList | filter: $select.search|limitTo:15">
                                              <span ng-bind-html="integration.integration_name | highlight: $select.search"></span>
                                            </ui-select-choices>
                                          </ui-select>


                                        <!--<input type="text" ng-model="info.selectIntegration" placeholder="选择集成计划"-->
                                        <!--ng-disabled="env.areas[info.areaIndex].status == 'running'"-->
                                        <!--uib-typeahead="integration as integration.integration_name for integration in info.integrationList | filter:{integration_name:$viewValue}|limitTo:15"-->
                                        <!--typeahead-template-url="selectTemplate.html" class="form-control"-->
                                        <!--typeahead-on-select="changeCheckStatusByIntegration(true);"-->
                                        <!--typeahead-editable="false"-->
                                        <!--typeahead-show-hint="true" typeahead-min-length="0"-->
                                        <!--ng-blur="integrationBlur()">-->
                                    </span>
                                </td>
                                <td width="50%">
                                    <span ng-show="info.isUseIntegration">
                                        <img ng-show="info.selectIntegration.integration_status != null && info.selectIntegration.integration_status != 'INT_NOT_START'"
                                             uib-popover="点击查看集成计划信息" popover-trigger="mouseenter"
                                             src="/beetle/image/link.png" ng-click="link();"
                                             style="cursor: pointer;width: 20px;margin-left: 2%;">
                                        <span style="margin-left: 1%;"
                                              ng-if="info.selectIntegration.integration_status != null">上线日期:{{info.selectIntegration.online_date}}</span>
                                        <span style="margin-left: 1%;"
                                              ng-if="info.selectIntegration.integration_status != null">
                                            状态:
                                            <span style="color: red;"
                                                  ng-if="info.selectIntegration.integration_status == 'INT_NOT_START'">未开始</span>
                                            <span ng-if="info.selectIntegration.integration_status == 'INTEGRATIONING'">集成中</span>
                                            <span ng-if="info.selectIntegration.integration_status == 'HAND_OVER'">交付运维</span>
                                            <span ng-if="info.selectIntegration.integration_status == 'ONLINE'">已上线</span>
                                        </span>
                                        <span ng-if="info.isLackPro" style="margin-left: 2%;">
                                            当前环境缺少工程: <span style="color: red;">{{info.lackProNames}}</span>
                                        </span>
                                    </span>
                                </td>
                            </tr>
                            <tr ng-show="canUseUBarrier();" style="line-height: 45px;">
                                <td></td>
                                <td>
                                    <input ng-model="info.isUseUBarrier" ng-true-value="true"
                                           ng-disabled="env.areas[info.areaIndex].status == 'running'"
                                           ng-click="getUBarrierStatus();"
                                           ng-false-value="false" type="checkbox">使用uBarrier校验
                                </td>
                                <td colspan="2">
                                    <span>{{info.grayDesc}}</span>
                                    <a href="javascript:void(0)" style="padding-left: 5%;" ng-if="info.isUseUBarrier"
                                       ng-click="toBarrier();">点击查看流量切换状态</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body" style="margin-top:20px;">

                    <ul id="myTab" class="nav nav-tabs">
                        <li class="" data-ng-repeat="area in env.areas track by $index"
                            ng-class="{true:'active',false:''}[$index==0]">
                            <a href="javascript:#{{'area'+$index}}" data-toggle="tab" ng-click="areaClick($index);">
                                {{area.alias}}</a>
                        </li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade" id="{{'area'+$index}}"
                             data-ng-repeat="area in env.areas track by $index"
                             ng-class="{true:'in active',false:''}[$index==0]">
                            <div class="panel-group" id="accordion">
                                <div class="panel panel-primary"
                                     style="margin-bottom: 15px;margin-top:15px;">
                                    <div class="panel-heading"
                                         ng-class="{'demo':'env_demo','online':'env_online','staging':'env_staging','verify':'env_verify'}[env.name]"
                                         data-ng-click="toggle('area'+$index+'filter')">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion">
                                                应用过滤
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="area{{$index}}filter" class="panel-collapse collapse in">
                                        <div class="panel-body">
                                            <form class="row form-horizontal">
                                                <div class="form-group" style="margin: 0 10px 0 10px;">
                                                    <div data-ng-repeat="filter in filterArrays[$index]">
                                                        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                                                            <label class="control-label col-lg-9 col-md-8 col-sm-7 col-xs-6"
                                                                   style="word-break:break-all;">{{filter.name}}</label>
                                                            <div class="col-lg-3 col-md-4 col-sm-5 col-xs-6">
                                                                <switch data-ng-model="filter.enable"
                                                                        ng-change="switchAllFilter(filter)"
                                                                        disabled="area.status=='running'"></switch>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-primary"
                                     style="margin-bottom: 15px;">
                                    <div class="panel-heading"
                                         ng-class="{'demo':'env_demo','online':'env_online','staging':'env_staging','verify':'env_verify'}[env.name]"
                                         data-ng-click="toggle('area'+$index+'operation')">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion">
                                                应用操作
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="area{{$index}}operation" class="panel-collapse collapse in">
                                        <div class="panel-body">
                                            <form class="form-horizontal">
                                                <div class="form-group">
                                                    <div class="input-group col-lg-1 pull-left"
                                                         style="margin: 0 0 0 20px; ">
                                                        <div class="input-group-btn">
                                                            <button type="button" class="btn">分组</button>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <select data-ng-model="groupArray[$index]" class="form-control"
                                                                style="margin-right:20px;width:90px;"
                                                                ng-disabled="area.status=='running'"
                                                                ng-change="changeGroup()"
                                                                ng-options="option as option for option in area.groups|operationGroupsFilter">
                                                        </select>
                                                    </div>
                                                    <button class="btn btn-default pull-left"
                                                            data-ng-click="ready()"
                                                            ng-disabled="area.status=='running'||!isValidTasks((area.tasks|taskFilter:filterArrays[$index] |groupFilter:groupArray[$index]),'prepare')">
                                                        准备
                                                    </button>
                                                    <button class="btn btn-default pull-left" data-ng-click="stop()"
                                                            ng-disabled="area.status=='running'||!isValidTasks((area.tasks|taskFilter:filterArrays[$index] |groupFilter:groupArray[$index]),'stop')">
                                                        停
                                                    </button>
                                                    <button class="btn btn-default pull-left" data-ng-click="backup()"
                                                            ng-disabled="area.status=='running'||!isValidTasks((area.tasks|taskFilter:filterArrays[$index] |groupFilter:groupArray[$index]),'backup')">
                                                        备份
                                                    </button>
                                                    <button class="btn btn-default pull-left" data-ng-click="setup()"
                                                            ng-disabled="area.status=='running'||!isValidTasks((area.tasks|taskFilter:filterArrays[$index] |groupFilter:groupArray[$index]),'install')">
                                                        安装
                                                    </button>
                                                    <button class="btn btn-default pull-left" data-ng-click="boot()"
                                                            ng-disabled="area.status=='running'||!isValidTasks((area.tasks|taskFilter:filterArrays[$index] |groupFilter:groupArray[$index]),'start')">
                                                        启动
                                                    </button>

                                                    <!--<button class="btn btn-default pull-left"-->
                                                    <!--style="margin:0 0 0 100px;" data-ng-click="validate()"-->
                                                    <!--ng-disabled="area.status=='running'||!isValidTasks((area.tasks|taskFilter:filterArrays[$index] |groupFilter:groupArray[$index]),'validate')">-->
                                                    <!--验证-->
                                                    <!--</button>-->
                                                    <button class="btn btn-default pull-left" data-ng-click="rollback()"
                                                            style="margin:0 0 0 100px;"
                                                            ng-disabled="area.status=='running'||!isValidTasks((area.tasks|taskFilter:filterArrays[$index] |groupFilter:groupArray[$index]),'rollback')">
                                                        回滚
                                                    </button>
                                                    <button class="btn btn-default pull-left" data-ng-click="startAll()"
                                                            ng-disabled="area.status=='running'||!isValidTasks((area.tasks|taskFilter:filterArrays[$index] |groupFilter:groupArray[$index]),'startAll')">
                                                        一键发版
                                                    </button>
                                                    <label class="control-label pull-left"
                                                           style="margin:0 0 0 10px;">准备</label>
                                                    <div class="pull-left" style="margin:0 0 0 10px;">
                                                        <switch data-ng-model="area.needPrepare"
                                                                ng-change="setNeedPrepare(area)"
                                                                disabled="area.status=='running'"></switch>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-primary"
                                     style="margin-bottom: 15px;">
                                    <div class="panel-heading"
                                         ng-class="{'demo':'env_demo','online':'env_online','staging':'env_staging','verify':'env_verify'}[env.name]"
                                         data-ng-click="toggle('area'+$index+'tasks')">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion">
                                                应用
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="area{{$index}}tasks" class="panel-collapse collapse in">
                                        <div class="panel-body">
                                            <table class="table table-bordered">
                                                <thead>
                                                <tr>
                                                    <!--<th  class="col-lg-1 col-md-1">分组</th>
                                                    <th  class="col-lg-1 col-md-1">应用</th>
                                                    <th  class="col-lg-1 col-md-1">版本</th>
                                                    <th  class="col-lg-1 col-md-1">IP</th>
                                                    <th  class="col-lg-3 col-md-4">处理进度</th>
                                                    <th  class="col-lg-2 col-md-2">状态信息</th>
                                                    <th  class="col-lg-1 col-md-1">日志</th>-->
                                                    <th width="5%">分组</th>
                                                    <th width="5%">应用</th>
                                                    <th width="10%">版本</th>
                                                    <th width="10%">IP</th>
                                                    <th width="40%">处理进度</th>
                                                    <th width="25%">状态信息</th>
                                                    <th width="5%">日志</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr class="item"
                                                    data-ng-repeat="task in area.tasks|taskFilter:filterArrays[$index] |groupFilter:groupArray[$index]">
                                                    <td data-ng-bind="task.group"></td>
                                                    <!--<td  style="word-break:break-all;" >
                                                        <a href="javascript:void(0)" class="btn-link"
                                                           popover-title="config path"
                                                           type="button" popover-trigger="outsideClick"
                                                           uib-popover-template="'configPathPopoverTemplate'"
                                                           data-ng-click="toCurConfigPath()"
                                                        >{{task.name}}</a>
                                                    </td>-->
                                                    <td>
                                                        <a href="javascript:void(0)" class="btn-link"
                                                           popover-title="主干"
                                                           type="button" popover-trigger="outsideClick"
                                                           uib-popover="{{task.name}}"
                                                           style="word-break:break-all;"
                                                           data-ng-bind-html="task.name|branchFilter:versionsMap:info.isUseIntegration:info.selectIntegration.projects"
                                                        ></a>
                                                    </td>
                                                    <td style="word-break:break-all;"
                                                        data-ng-bind-html="task.name|versionFilter:versionsMap:info.isUseIntegration:info.selectIntegration.projects"></td>
                                                    <td>
                                                        <a href="javascript:void(0)" class="btn-link"
                                                           popover-title="config path"
                                                           type="button" popover-trigger="outsideClick"
                                                           uib-popover="{{task.configPath}}"
                                                        >{{task.ip}}:{{task.httpPort}}</a>
                                                    </td>
                                                    <td>
                                                        <span class="label label-default round"
                                                              ng-class="{'ready':'label-default','running':'label-info running','success':'label-success','error':'label-danger','timeout':'label-warning','warning':'label-warning','exception':'label-danger running','pause':'label-danger running'}[task.status[0]]"
                                                              style="">准</span>
                                                        <span class="label label-default round" style=""
                                                              ng-class="{'ready':'label-default','running':'label-info running','success':'label-success','error':'label-danger','timeout':'label-warning','warning':'label-warning','exception':'label-danger running','pause':'label-danger running'}[task.status[1]]"
                                                              uib-popover="{{task.stopMsg}}"
                                                              popover-trigger="mouseenter"
                                                        >停</span>
                                                        <span class="label label-default round"
                                                              ng-class="{'ready':'label-default','running':'label-info running','success':'label-success','error':'label-danger','timeout':'label-warning','warning':'label-warning','exception':'label-danger running','pause':'label-danger running'}[task.status[2]]"
                                                        >备</span>
                                                        <span class="label label-default round"
                                                              ng-class="{'ready':'label-default','running':'label-info running','success':'label-success','error':'label-danger','timeout':'label-warning','warning':'label-warning','exception':'label-danger running','pause':'label-danger running'}[task.status[3]]"
                                                        >传</span>
                                                        <span class="label label-default round"
                                                              ng-class="{'ready':'label-default','running':'label-info running','success':'label-success','error':'label-danger','timeout':'label-warning','warning':'label-warning','exception':'label-danger running','pause':'label-danger running'}[task.status[4]]"
                                                        >启</span>
                                                        <!-- 启动检查 -->
                                                        <span class="label label-default round"
                                                              ng-class="{'ready':'label-default','running':'label-info running','success':'label-success','error':'label-danger','timeout':'label-warning','warning':'label-warning','exception':'label-danger running','pause':'label-danger running'}[task.status[5]]"
                                                        >查</span>
                                                        <!-- dubbo校验 -->
                                                        <!--<span class="label label-default round"-->
                                                        <!--ng-class="{'ready':'label-default','running':'label-info running','success':'label-success','error':'label-danger','timeout':'label-warning','warning':'label-warning','exception':'label-danger running','pause':'label-danger running'}[task.status[6]]"-->
                                                        <!--&gt;验</span>-->
                                                    </td>
                                                    <td style="word-break:break-all;"><span
                                                            ng-class="{'complete':'msg-complete','warning':'msg-warning'}[checkComplete()]"
                                                    >{{task.statusMsg}}</span>
                                                        <button class="btn btn-success btn-sm"
                                                                data-ng-click="confirmCallBack(0)" ng-show="isPause()">
                                                            继续
                                                        </button>
                                                        <button class="btn btn-danger btn-sm"
                                                                data-ng-click="confirmCallBack(1)" ng-show="isPause()">
                                                            终止
                                                        </button>
                                                    </td>
                                                    <td>
                                                        <button class="btn btn-default"
                                                                data-ng-click="openShowLogModal('lg')">...
                                                        </button>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>
    <script type="text/ng-template" id="TaskLogModal.html">
        <div class="modal-header">
            <h3 class="modal-title">{{task.name}}({{task.ip}})日志</h3>
        </div>
        <div class="modal-body">
            <!--<h3>{{task.path}}</h3> -->
            <blockquote>{{log}}
                <small>Task config path is <cite title="Source Title">{{task.configPath}}</cite></small>
            </blockquote>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="cancel()">关闭</button>
        </div>
    </script>
    <!--<script type="text/ng-template" id="configPathPopoverTemplate">
        <div style="word-wrap: break-word ">
            <em>{{curConfigPath}}</em>
        </div>
    </script>-->
</section>